﻿<UserControl x:Class="Songhay.Silverlight.BiggestBox.IndexPart.Views.UserControls.VisualStateManagerWithDataTriggerSample"
    x:Name="MyUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:vm="clr-namespace:Songhay.Silverlight.BiggestBox.IndexPart.ViewModels"
    Tag="Visual State Manager with DataTrigger Sample">
    <UserControl.Resources>
        <vm:VisualStateManagerWithDataTriggerSampleViewModel x:Key="VisualStateManagerWithDataTriggerSampleDataSource" d:IsDataSource="True" />
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource VisualStateManagerWithDataTriggerSampleDataSource}"/>
    </UserControl.DataContext>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ContactMethodState">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ContactMethodsRequired" >
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ContactMethods">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ContactMethodsNotRequired" >
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ContactMethods">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <i:Interaction.Triggers>
            <!--
                In Expression Blend, explicitly binding TargetObject
                to a named root (MyUserControl) causes the DataTrigger
                to fire on initialization/load.
            -->
            <ei:DataTrigger Binding="{Binding IsContactable}" Value="True">
                <ei:GoToStateAction x:Name="GotoRequired" StateName="ContactMethodsRequired" TargetObject="{Binding ElementName=MyUserControl}" />
            </ei:DataTrigger>
            <ei:DataTrigger Binding="{Binding IsContactable}" Value="False">
                <ei:GoToStateAction x:Name="GotoNotRequired" StateName="ContactMethodsNotRequired" TargetObject="{Binding ElementName=MyUserControl}" />
            </ei:DataTrigger>
        </i:Interaction.Triggers>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListBox x:Name="ContactMethods" ItemsSource="{Binding ContactMethods}" Margin="16,16,0,16" HorizontalAlignment="Left" Width="68" />
        <CheckBox Grid.Row="1" Content="Can we contact the customer?" IsChecked="{Binding IsContactable, Mode=TwoWay}" Margin="32" />
    </Grid>
</UserControl>
